<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表格样式</title>
		<style type="text/css">
			#book{
				width: 90%;	
				border-collapse: separate; /*合并表格边框*/
			}
			#book caption{
				caption-side: top;   /*设置标题在表格上方，top为默认值，可不写*/
				font:normal bold 20px/46px "微软雅黑";
			}
			#book th,#book td{
				border: 1px solid gray;
				width: 30%;
				height: 40px;
				text-align: center;
			}
			#book th{
				font-size: 18px;
				background: black ;
				color: white;
			}
			#book tr:nth-of-type(even){
				background-color: gainsboro;  /*设置偶数行的背景颜色*/
			}
			#book tr:hover{
				background-color: rgb(230, 30, 34);  /*设置鼠标滑过时行背景颜色的样式*/
			}
		</style>
	</head>
	<body>
		<table id="book">
			<caption>古代名著</caption>
			<thead>
				<th>书名</th>
				<th>作者</th>
				<th>所属年代</th>
			</thead>
			<tr>
				<td>《西游记》</td>
				<td>吴承恩</td>
				<td>明代</td>
			</tr>
			<tr>
				<td>《世说新语》</td>
				<td>刘义庆</td>
				<td>南北朝</td>
			</tr>
			<tr>
				<td>《儒林外史》</td>
				<td>吴敬梓</td>
				<td>清朝</td>
			</tr>
			<tr>
				<td>《红楼梦》</td>
				<td>曹雪芹</td>
				<td>清朝</td>
			</tr>
		</table>
	</body>
</html>
